<!--同城组件-->
<template>
	<div>
		<Swiper></Swiper>
		<div class="fat">
			<div v-for='item in newgoods' class="newgoods">
				<img :src="item.img"/>
			</div>
			<ul>
				<li>分类:  </li>
				<li @click="all">全部</li>
				<li>餐饮</li>
				<li>酒店</li>
				<li>休闲</li>
				<li>电影</li>
				<li>汽车装饰</li>
				<li>家政</li>
			</ul>
			<hr>
			<div class="Sales">
				<button>销量</button>
				<button class="center_button">价格</button>
				<button>评分最高</button>
			</div>
			<!--阳澄湖大闸蟹-->
			<div class="FOOD">
				<div class='food' v-for='(a,index) in arr' @click="quxiangqing(index)">
					<img :src="a.picture"/>
					<p class='name'>{{a.name}}</p>
					<span>
						<img :src="a.star"/>
						<span class="price">¥ {{a.price}}</span>
					</span>		
					<p class="address">{{a.address}}</p>
				</div>
			</div>		
		</div>
	</div>
</template>

<script>
	import Swiper from '../Swiper.vue'
	export default{
		name:'City',
		methods:{
		all:function(){
			window.location.href='#/GoodsClass'
		},
		quxiangqing:function(index){
			this.goodsid=this.arr[index].id
//			this.$store.commit('goods',{goodsId:this.goodsid})
			window.location.href="#/Description/"+this.goodsid
//			console.log(this.$store.state.goodsId[0].goodsId)
			}
	},
		components:{
			Swiper
		},
		data:function(){
			return{
				arr:[],
				goodsid:"",
				newgoods:[{
					img:require('../../assets/image/1477535879580.png')
				},{
					img:require('../../assets/image/1478244295004.png')
				},{
					img:require('../../assets/image/1478244374905.png')
				},{
					img:require('../../assets/image/1478244430106.png')
				}]		
			}
		},
		mounted(){
			$("ul li").on('click',function(){
				$("li").removeClass('once');
				$(this).addClass('once');			
			});
			var _this = this;
			this.axios.get('/api/index')
			.then(function(data){
				_this.arr=data.data;
				console.log(_this.arr);
			})
		}
	}
</script>

<style scoped>
	.fat{
		width: 1280px;
		margin:15px auto;
	}
	/*轮播下方图片*/
	.newgoods{
		display: inline-block;
		margin-right: 15px;
	}
	ul li{
		display: inline-block;
		width: 65px;
		height: 26px;
		line-height: 26px;
		font-size: 16px;
		text-align: center;
		margin-top: 10px;
	}
	ul li:hover{
		color: green;
	}
	/*销量*/
	.Sales:after{
		content: "";
		display: block;
		clear: both;
	}
	.Sales{
		width: 320px;
		line-height: 26px;
		/*background: green;*/
		float: right;
	}
	.Sales button{
		font-size: 18px;
		margin-left: 34px;
	}
	.center_button{
		color: green;
	}
	/*	食物*/
	.FOOD {
		margin-top: 45px;
		width: 1280px;
		/*background: green;*/
		text-align: center;
	}
	.food{
		width: 306px;
		height: 300px;
		background: #f8f6f7;
		display: inline-block;
		margin-right: 14px;
	}
	.food>img{
		width: 306px;
		height: 306px;
		margin: 10px 10px 10px 0px;
		vertical-align: -11px;
	}
	.food p{
		line-height: 50px;
	}
	.name{
		font-size: 18px;
	}
	.price{
		color: #ec6a17;
	}
	.address{
		font-size: 14px;
		color: darkgray;
	}
	/*评分中的星星*/
	span img{
		width: 100px;
		height: 17px;
	}
	/*自己加的class名*/
	.once{
		background: green;
		color: white;
	}
</style>